import React, { useState } from 'react';
import { connect } from 'dva';
import { useBoolean } from '@umijs/hooks';
import { Card, Tooltip, Icon } from 'antd';
import styles from './index.less';
import TreeMenu from './Tree.js';
import Content from './Content';
import QueryCatalog from './components/QueryCatalog';

function Menu(props) {
  const { state, setTrue, setFalse } = useBoolean(false);
  const [queryCatalogStatus, setQueryCatalogStatus] = useState('');

  return (
    <div className={styles.scroll_main}>
      <div className={styles.scroll_left}>
        <Card
          className="cute"
          title="方案配置"
          style={{ height: props.size.height }}
          extra={
            <Tooltip title="新增主目录">
              <Icon
                type="plus-circle"
                className={styles.icon_hover}
                onClick={() => {
                  setTrue();
                  setQueryCatalogStatus('add');
                }}
              />
            </Tooltip>
          }
        >
          <TreeMenu height={props.size.height} goToStep={props.goToStep} />
        </Card>
      </div>
      <div className={styles.scroll_content}>
        <Card title="配置区" style={{ height: props.size.height }}>
          <Content height={props.size.height} />
        </Card>
      </div>

      {state ? (
        <QueryCatalog visiable={state} close={setFalse} status={queryCatalogStatus} />
      ) : null}
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Menu);
